<template>
    <view>
        <view class="top">
            <image src="/static/imgs/headbg.png" mode="widthFix" class="headbg"></image>
        </view>
        <view class="flex">
            <view @click="gotoPage(1)">
                <image src="/static/imgs/icon1.png" mode="" class="ii"></image>
                <view>任务管理</view>
            </view>
            <view @click="gotoPage(2)">
                <image src="/static/imgs/icon2.png" mode="" class="ii"></image>
                <view>专项巡查</view>
            </view>
            <view @click="gotoPage(3)">
                <view class="icobn3">
                    <image src="/static/imgs/icon3.png" mode="" class="ii"></image>
                </view>
                <view>线索反馈</view>
            </view>
        </view>

        <view style="margin-top: 3rem;">
            <view class="tip">
                <image src="/static/imgs/tip.png" mode="" class="tips"></image>
                <text style="margin-left:20rpx;">已接收任务</text>
            </view>
            <view v-for="(item, index) in 10" :key="index" class="listBox">
                <view class="listTitle">
                    <h3 class="title">粗磨发现人物聚集</h3>
                    <tui-tag type="danger" padding="10rpx 14rpx" size="26rpx">未完成</tui-tag>
                </view>
                <view class="time">事发时间：2020-10-10 14:12</view>
            </view>
        </view>
        <tui-modal :show="0" custom>
            <view class="tui-modal-custom">
                <view style="padding: 2rem 0; text-align: center; font-size: 30rpx;">您有一条任务待接收，请及时查看</view>
                <tui-button height="80rpx" :size="28" @click="desc1">确定</tui-button>
            </view>
        </tui-modal>

        <tui-tabbar :tabBar="tabBar" :current="0" @click="tabbarSwitch" color="#9B9B9B" selectedColor="#3291F8"
            iconSize="48">
        </tui-tabbar>
    </view>
</template>

<script>
import {
    mapState,
    mapGetters,
    mapMutations
} from 'vuex'
import mClockIn from "@/components/hq-ui/m-clock-in"
import indexConfig from "@/config/index.config.js"
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'

export default {
    components: {
        mClockIn, uniLoadMore
    },
    data() {
        return {
        };
    },
    computed: {
        ...mapGetters(['tabBar', "hasLogin"]),
        ...mapState(["isUserPhone"]),
    },
    onLoad() {
    },
    onUnload() {

    },
    onShow() {

    },
    onReachBottom: function () {
        //触底开始下一页
        console.log(45454545454);
    },
    methods: {
        gotoPage(i) {
            if (i == 1) {
                uni.navigateTo({ url: '/pages/userViews/taskList' });
                // this.$Router.navigateTo('pages/userViews/taskList');
            } else if (i == 2) {
                uni.navigateTo({ url: '/pages/userViews/taskList?type=zx' });
            } else if (i == 3) {
                uni.navigateTo({ url: '/pages/userViews/taskList?type=xs' });
            }
        },

        desc1() {
            this.$apis.specialCheckDesc('1694673022002016257')
        },
        
        
        desc() {
            this.$apis.weekCheckDesc('1694667440624906242')
        },
        
        
        tabbarSwitch(e) {
            if (e.index == 0) return
            if (e.index == 1) {
                uni.switchTab({ url: '/pages/userViews/taskList' })
                // this.$Router.switchTab('tabBar-dataDisplay');
            } else if (e.index == 2) {
                this.$Router.switchTab('tabBar-user');
            }
        },
    }
}
</script>

<style lang="scss">
page {
    background: #fff;
}

.top {
    position: relative;
}

.headbg {
    width: 100%;
}

.flex {
    width: 100%;
    position: absolute;
    top: 280rpx;
    margin: auto;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background: #fff;
    width: 90%;
    border-radius: 20rpx;
    padding: 40rpx 20rpx;
}

.ii {
    width: 100rpx;
    height: 100rpx;
    margin-bottom: 10rpx;
}

.icobn3 {
    width: 100rpx;
    height: 100rpx;
    margin-bottom: 10rpx;
    border-radius: 30rpx;
    background: #66dd5d;
    position: relative;

    image {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 60rpx;
        height: 60rpx;
        margin: auto;
    }
}

.icon {
    width: 2rem;
    height: 2rem;
    // background: #27bbcf;
}

.tip {
    font-size: 30rpx;
    font-weight: bold;
    margin: 20rpx;
    position: relative;
}

.tips {
    position: absolute;
    left: 0;
    top: -4rpx;
    width: 50rpx;
    height: 50rpx;
    z-index: -1;
}

.img {
    width: 100%;
    height: 350rpx;
    background: #27bbcf;
}

.listBox {
    width: 90%;
    background: #fff;
    padding: 40rpx;
    margin: 0 auto 2rem;
}

.listTitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .title {
        font-size: 36rpx;
        font-weight: bold;
    }
}

.time {
    margin-top: 30rpx;
    color: #999;
}
</style>